<template>
  <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" style="width: 45%; padding-top: 10px; margin-right: 220px; padding-left: 4px;" :disabled="pageType == 'look'">
    <el-form-item label="红包类型">
      <el-radio-group v-model="formData.red_type"> <el-radio :label="1">普通红包</el-radio> <el-radio :label="2">拼手气红包</el-radio> </el-radio-group>
    </el-form-item>
    <div class="red_box">
      <el-form-item v-if="formData.red_type == 1" label="单个红包金额" label-width="110px" prop="amount">
        <el-input-number v-model="formData.amount" placeholder="请输入红包金额" :controls="false" :precision="2" style="width: 300px" /><span>&ensp;元</span> <div class="inp_text">金额在 0.3-200之间</div></el-form-item
      >
      <el-form-item v-else label="单个红包金额" label-width="110px" prop="max_amount">
        <div style="display: flex">
          <el-form-item prop="min_amount" :show-message="false">
            <el-input-number v-model="formData.min_amount" :min="0.3" :controls="false" :precision="2" placeholder="￥0.30" style="width: 100px" type="number" />
          </el-form-item>
          <span> &ensp;元 - &ensp;</span>
          <el-input-number v-model="formData.max_amount" :max="200" :controls="false" :precision="2" placeholder="￥200.00" style="width: 100px" type="number" />
          <span> &ensp;元 </span>
        </div>
        <div class="inp_text">金额在 0.3-200之间</div>
      </el-form-item>
      <el-form-item label="红包个数" label-width="110px" prop="red_num"> <el-input-number v-model="formData.red_num" :min="1" :controls="false" :precision="0" placeholder="请输入红包总个数" style="width: 300px" /><span>&ensp;个</span> </el-form-item>
      <el-form-item label="红包总金额" label-width="110px" prop="red_total">
        <div v-if="formData.red_type == 1" class="red_total">{{ formData.red_total }}元</div>
        <div v-else class="red_total">{{ `${minAmount}~${maxAmount}` }}元</div>
        <!-- <div style="display: flex">
          <div style="display: flex; justify-content: center; width: 298px; height: 40px; border-radius: 4px; border: 1px solid #c0c4cc40; background: #f5f7fa; color: #c1c3cb">
            <div>{{ formData.min_amount }} </div>
            ~
            <div> {{ formData.max_amount }}.00</div>
          </div>
          <span>&ensp;元</span>
        </div> -->
      </el-form-item>
      <el-form-item label="客户限制">
        <el-radio-group v-model="formData.customer_type"> <el-radio :label="1">不限</el-radio> <el-radio :label="2">仅限新用户</el-radio> </el-radio-group>
      </el-form-item>
      <el-form-item label="地区限制">
        <el-radio-group v-model="formData.area_type"> <el-radio :label="1">不限</el-radio> <el-radio :label="2">部分地区</el-radio> </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.area_type == 2" prop="pca_code" style="width: 408px">
        <el-cascader v-model="formData.pca_code" :options="cityData" :props="defaultProps" style="width: 100%">
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
    </div>
  </el-form>
</template>
<script lang="ts" setup>
  import { reactive, ref, defineExpose, defineProps, defineEmits, computed } from 'vue'
  import type { FormInstance } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import { mul, div } from '@/utils/math'
  import cityData from '@/assets/js/city'
  interface Props {
    pageType: any
  }
  const props = withDefaults(defineProps<Props>(), {
    pageType: ''
  })
  const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'code'
  }
  const emit = defineEmits(['submit'])
  const formRef = ref<FormInstance>()
  const formData = ref<any>({
    red_type: 1,
    amount: 0.3,
    min_amount: 0.3,
    max_amount: 200,
    red_num: 1,
    red_total: 0,
    customer_type: 1,
    area_type: 1,
    pca_code: []
  })
  const minAmount = computed(() => {
    return mul(formData.value.min_amount, formData.value.red_num)
  })
  const maxAmount = computed(() => {
    return mul(formData.value.max_amount, formData.value.red_num)
  })
  formData.value.red_total = computed(() => {
    let num = formData.value.red_type == 1 ? formData.value.amount : formData.value.max_amount
    return mul(num, formData.value.red_num)
  })
  const amountValidator = (rule, value, callback) => {
    if (value < 0.3 || value > 200) {
      callback(new Error('金额在 0.3-200之间'))
    } else {
      callback()
    }
  }
  // 红包个数
  const redNumValidator = (rule, value, callback) => {
    formData.value.red_num = Math.ceil(value)
    callback()
  }
  // 最小红包金额
  const minAmountValidator = (rule, value, callback) => {
    if (value < 0.3) {
      ElMessage.error('最小金额不能小于0.3元')
      callback(new Error('最小金额不能小于0.3元'))
    }
    if (value > formData.value.max_amount && formData.value.max_amount) {
      ElMessage.error('最小金额不能大于最大金额')
      callback(new Error('最小金额不能大于最大金额'))
    } else {
      callback()
    }
  }
  // 最大红包金额
  const maxAmountValidator = (rule, value, callback) => {
    if (value > 200) {
      callback(new Error('最大金额不能大于200元'))
    }
    if (value < formData.value.min_amount) {
      callback(new Error('最大金额不能小于最小金额'))
    } else {
      callback()
    }
  }
  // 红包总金额
  const redTotalValidator = (rule, value, callback) => {
    if (value > 100000) {
      callback(new Error('红包总金额不得超过10万元'))
    } else {
      callback()
    }
  }
  const formRules = {
    amount: [
      { required: true, message: '请输入红包金额', trigger: 'blur' },
      { validator: amountValidator, trigger: 'blur' }
    ],
    min_amount: [
      { required: true, message: '请输入最小红包金额', trigger: 'blur' },
      { validator: minAmountValidator, trigger: 'blur' }
    ],
    max_amount: [
      { required: true, message: '请输入最大红包金额', trigger: 'blur' },
      { validator: maxAmountValidator, trigger: 'blur' }
    ],
    red_num: [
      { required: true, message: '请输入红包个数', trigger: 'blur' },
      { validator: redNumValidator, trigger: 'blur' }
    ],
    red_total: [{ validator: redTotalValidator, trigger: 'change' }],
    pca_code: [{ required: true, message: '请选择地区', trigger: 'change' }]
  }
  const onSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate((valid: any, fields: any) => {
      if (valid) {
        emit('submit')
      } else {
        ElMessage.warning(Object.values(fields)[0][0].message)
      }
    })
  }

  defineExpose({
    formData,
    onSubmit
  })
</script>
<style lang="scss" scoped>
  .red_total {
    font-size: 14px;
    font-family: STHeitiSC-Medium, STHeitiSC;
    font-weight: 500;
    color: #ff6b00;
  }
  .red_box {
    width: 600px;
    margin-left: 107px;
    margin-top: -20px;
    .inp_text {
      padding-top: 10px;
      font-weight: 300;
      color: #969696;
      line-height: 12px;
    }
  }
</style>
